<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/js/jquery.min.js" charset="utf-8"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script src="/static/js/xadmin.js"></script>
    <script src="/static/js/axios.min.js"></script>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a><cite>商品管理</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <label>
                                <input type="text" name="productTitle" placeholder="请输入商品名" autocomplete="off"
                                       class="layui-input">
                            </label>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button type="button" class="layui-btn" lay-submit="" lay-filter="search" name="search"
                                    onclick="getProductList()">
                                <i class="layui-icon">&#xe615;</i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-table" id="product" lay-filter="product"></table>
</div>


</body>
<script>
    getProductList();
    layui.use('laytpl');

    function getProductList() {
        layui.use('table', function () {
            let table = layui.table;
            table.render({
                elem: '#product'
                , url: '/index.php/admin/Product/getProductList'
                , where: {
                    title: $("input[name='productTitle']")[0].value
                }
                , page: true
                , toolbar: true
                , cols: [[ //表头
                    {field: 'pro_no', title: '商品编号', fixed: 'left'}
                    , {field: 'title', title: '商品名称'}
                    , {field: 'keywords', title: '关键词', width: 150, templet: '#slot_keywords', align: 'center'}
                    , {field: 'img', title: '主图', width: 80, templet: '#slot_img', align: 'center'}
                    , {field: 'price', title: '价格', width: 80}
                    , {field: 'pv', title: '浏览量', width: 80, sort: true}
                    , {field: 'add_time', title: '添加时间', width: 150, sort: true, align: 'center'}
                    , {field: 'status', title: '上下架', width: 80, fixed: 'right', templet: (d) => productStatus(d)}
                ]]
            });

        })
    };
</script>

<script type="text/html" id="slot_keywords">
    {{#
    var temp = d.keywords.split(";");
    layui.each(temp, function(index,item){
    }}
    <span class="layui-badge layui-bg-green">{{ item }}</span>
    {{#
    })
    }}
</script>
<script type="text/html" id="slot_img">
    {{#
    let temp = d.img.split(";");
    let mainImage = temp[0];
    }}

    <img src="{{mainImage}}" style="height: 100%; width: 100%;object-fit: contain" alt="{{d.img}}">
</script>
<script id="slot_status">
    function productStatus(d) {
        if (d.status === 1) {
            return '<div class="layui-form"> <input type="checkbox" checked lay-skin="switch" name="statusSwitch" lay-filter="statusSwitch" data-id=' + d.id + '' +
                ' lay-text="上架|下架"  value=' + d.status + '></div>';
        }
        return '<div class="layui-form"> <input type="checkbox" lay-skin="switch" name="statusSwitch" data-id=' + d.id + ' lay-filter="statusSwitch"' +
            'lay-text="上架|下架" value=' + d.status + '></div>';
    }

    layui.use('form', (form) => {
        form.on('switch(statusSwitch)', function (data) {
            axios.get('/index.php/admin/product/uploadProductStatus', {
                params: {
                    id: data.elem.getAttribute('data-id'),
                    status: data.elem.checked === true ? 1 : 0
                }
            }).then(res => {
                console.log(res)
                if (res.data.code !== 0) {
                    layer.msg('修改失败', {icon: 2});
                    return;
                }
                layer.msg('修改成功', {icon: 1, time: 1500});
            });
        })
    });
</script>

<script>


    // function deleteImage(e) {
    //     layer.confirm('确认要删除吗？', function () {
    //
    //         let imageMd5 = $(e).val()
    //         axios.get('/index.php/admin/imageZone/deleteImageByMd5', {
    //             params: {
    //                 md5: imageMd5
    //             }
    //         }).then(res => {
    //             console.log(res)
    //             if (res.data.code !== 200) {
    //                 layer.msg('删除失败', {icon: 2});
    //                 return;
    //             }
    //             layer.msg('删除成功', {icon: 1, time: 1500});
    //             $(".image-box [data-md5=" + imageMd5 + "]").remove();
    //         });
    //     });
    // }

</script>

<style>
    .layui-table .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }
</style>
</html>
